<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>安顺理论收费管理</title>
    <link rel="stylesheet" type="text/css" href="/css/bootstrap.css" />
    <script src="/js/jquery-3.4.1.js"></script>
    <script src="/js/vue.js"></script>
    <!-- 引入样式 -->
    <link rel="stylesheet" href="https://unpkg.zhimg.com/element-ui/lib/theme-chalk/index.css">
    <!-- 引入组件库 -->
    <script src="https://unpkg.zhimg.com/element-ui/lib/index.js"></script>
    <script src="/js/bootstrap.js" type="text/javascript"></script>
    <!-- 网站图标 -->
    <link rel="icon" type="image/x-icon" href="/img/lscyzn_favicon.ico" >
    <link rel="shortcut icon" type="image/x-icon" href="/img/lscyzn_favicon.ico" >
    <style>
        .el-menu-vertical-demo:not(.el-menu--collapse) {
            width: 250px;
            min-height: 400px;
        }
        html,body,#app,.el-container{
            /*设置内部填充为0，几个布局元素之间没有间距*/
            padding: 0px;
            /*外部间距也是如此设置*/
            margin: 0px;
            /*统一设置高度为100%*/
            height: 100%;
        }
        .el-menu-demo{
            display:flex;
        }
        .item{
            flex:1;
        }
        a{ text-decoration:none}
        a:hover{ text-decoration:none}
    </style>
</head>
<body>
<div id="app">
    <el-container ref="homePage">
        <el-header>
            <el-menu :default-active="activeIndex" class="el-menu-demo" mode="horizontal" @select="handleSelect">
                <el-menu-item class="item">
                    <a href="/home.html" target="_blank">
                        <el-image style="width: 150px;" src="/img/bolt_stay.png" fit="scale-down"></el-image>
                    </a>
                </el-menu-item>
            </el-menu>
        </el-header>

        <el-container>
            <!-- 侧边栏 -->
                <el-row class="tac" >
<!--                    <el-radio-group v-model="isCollapse" style="margin-bottom: 20px;">-->
<!--                        <el-radio-button :label="false">展开</el-radio-button>-->
<!--                        <el-radio-button :label="true">收起</el-radio-button>-->
<!--                    </el-radio-group>-->
                    <el-menu default-active="1-4-1" class="el-menu-vertical-demo" @open="handleOpen" @close="handleClose" >
                        <a href="/page/list.html" target="main">
                            <el-menu-item index="1">
                                <i class="el-icon-document"></i>
                                <span slot="title">查询</span>
                            </el-menu-item>
                        </a>
                        <a href="/page/list.html" target="main">
                            <el-menu-item index="2">
                                <i class="el-icon-setting"></i>
                                <span slot="title">导航四</span>
                            </el-menu-item>
                        </a>
                    </el-menu>
                </el-row>

            <!-- 主要内容 -->
            <el-main style="background-color: #f1f3f9;">
                <el-row :gutter="12">
                    <el-col >
                        <el-card shadow="hover">
                            <iframe frameborder="0" scrolling="no" src="" name="main" width="100%" height="1600px"></iframe>
                        </el-card>
                    </el-col>
                </el-row>
                <!-- <iframe frameborder="1" scrolling="no" src="" name="main" width="1000px" height="600px"></iframe> -->
            </el-main>
        </el-container>
    </el-container>
</div>
<script>
    new Vue({
        el: "#app",
        data() {
            return {
                activeIndex: '1',
                activeIndex2: '1',
                clientHeight: '' //屏幕高度
            };
        },
        mounted() {
            // 获取浏览器可视区域高度
            this.clientHeight = `${document.documentElement.clientHeight}`
            //document.body.clientWidth;
            console.log(this.clientHeight);
            window.onresize = function temp() {
                this.clientHeight = `${document.documentElement.clientHeight}`;
            };
        },
        watch: {
            // 如果 `clientHeight` 发生改变，这个函数就会运行
            clientHeight: function() {
                this.changeFixed(this.clientHeight)
            }
        },
        methods: {
            handleOpen(key, keyPath) {
                console.log(key, keyPath);
            },
            handleClose(key, keyPath) {
                console.log(key, keyPath);
            },
            /* 导航栏点击事件*/
            handleSelect(key, keyPath) {
                console.log(key, keyPath);
            },
            changeFixed(clientHeight) { //动态修改样式
                this.$refs.homePage.$el.style.height = clientHeight - 20 + 'px';
            }
        }
    })
</script>
</body>
</html>